<template>
    <v-dialog
            ref="dialog"
            v-model="modal"
            :return-value.sync="birthday"
            persistent
            width="290px"
    >
        <template v-slot:activator="{ on, attrs }">
            <v-text-field
                    v-model="modal"
                    label="出生日期"
                    prepend-icon="mdi-calendar"
                    readonly
                    v-bind="attrs"
                    v-on="on"
            ></v-text-field>
        </template>
        <v-date-picker
                v-model="birthday"
                scrollable
                locale="zh-cn"
        >
            <v-spacer></v-spacer>
            <v-btn
                    text
                    color="primary"
                    @click="modal = false"
            >
                取消
            </v-btn>
            <v-btn
                    text
                    color="primary"
                    @click="$refs.dialog.save(birthday)"
            >
                确定
            </v-btn>
        </v-date-picker>
    </v-dialog>
</template>

<script>
    export default {
        name: "DatePicker",
        props: ['value'],
        data: () => ({
            modal: false,
            birthday: new Date().toISOString().substr(0, 10)
        })
    }
</script>

<style scoped>

</style>